<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryParams"
        label-width="100px"
      >
        <el-form-item
          label="敏感字段类型"
          prop="interfaceSensitiveRule"
        >
          <el-select placeholder="请选择" v-model="queryParams.interfaceSensitiveRule" @change="change">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item,index) in sensitiveTypeList"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="敏感字段"
          prop="responseRecordBody"
        >
          <el-select placeholder="请选择" v-model="queryParams.responseRecordBody">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item,index) in sensitiveList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item-->
<!--          label="应用名称"-->
<!--          prop="applicationName"-->
<!--        >-->
<!--          <div class="maxRowsDiv">-->
<!--            <el-cascader-->
<!--              v-model="queryParams.applicationName"-->
<!--              :show-all-levels="false"-->
<!--              :options="applicationList"-->
<!--              style="width: 100%"-->
<!--              checkStrictly-->
<!--              clearable-->
<!--              ref="cascader"-->
<!--             -->
<!--            ></el-cascader>-->
<!--          </div>-->
<!--        </el-form-item>-->
        <el-form-item
          label="协议"
          prop="requestRecordScheme"
        >
          <el-select placeholder="请选择" v-model="queryParams.requestRecordScheme">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="http" value="http"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="响应类型"
          prop="responseContentType"
        >
          <el-select placeholder="请选择" v-model="queryParams.responseContentType">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item,index) in responseTypeList"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请求路径"
          prop="apiUrl"

        >
          <common-input
            placeholder="请输入"
            v-model="queryParams.apiUrl"
            clearable
          >
          </common-input>
        </el-form-item>
      </el-form>
    </common-search>
    <!--  列表-->
    <common-table
      slot="content"
      :data="List"
      v-loading="loading"
    >
      <el-table-column
        label="请求地址"
        align="left"
        prop="requestRecordAddress"
        width="150px"
      >
      </el-table-column>
      <el-table-column
        label="端口"
        align="left"
        prop="requestRecordPort"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        label="协议"
        align="left"
        prop="requestRecordScheme"
        width="100px"
      />
      <el-table-column
        label="请求路径"
        align="left"
        prop="apiUrl"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="请求时间"
        align="left"
        prop="createtime"
        show-overflow-tooltip
        width="120px"
      >
      </el-table-column>
      <el-table-column
        label="敏感字段类型"
        align="left"
        prop="interfaceSensitiveRule"
        show-overflow-tooltip
        width="180px"
      >
      </el-table-column>
      <el-table-column
        label="数据分类"
        align="left"
        prop="interfaceDataType"
        show-overflow-tooltip
        width="120px"
      />
      <el-table-column
        label="敏感等级"
        align="left"
        prop="interfaceDataLevel"
        width="150px"
      />
      <el-table-column
        label="标签"
        align="left"
        prop="interfaceDataTags"
        show-overflow-tooltip

      />
      <el-table-column
        label="响应类型"
        align="left"
        prop="responseContentType"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{isShowType(scope.row.responseContentType)}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="getInfo(scope.row)"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--  详情弹框-->
    <common-info-dialog
      :visible="openInfo"
      title="详情"
      @cancel="cancelInfo"
    >
      <common-info-table>
        <common-group-title title="应用信息" style="padding: 0 20px;"></common-group-title>
        <common-info-table-cell label="应用IP">
          {{ info.requestRecordAddress }}
        </common-info-table-cell>
        <common-info-table-cell label="应用域名">
          {{ info.domainName}}
        </common-info-table-cell>

        <common-group-title title="敏感信息" style="padding: 0 20px;"></common-group-title>
        <common-info-table-cell label="敏感字段类型">
          {{ info.interfaceSensitiveRule }}
        </common-info-table-cell>
        <common-info-table-cell label="敏感等级">
          {{ info.interfaceDataLevel}}
        </common-info-table-cell>
        <common-info-table-cell label="标签">
          {{ info. interfaceDataTags }}
        </common-info-table-cell>
        <common-info-table-cell label="数据分类">
          {{ info.  interfaceDataType }}
        </common-info-table-cell>

        <common-group-title title="风险信息" style="padding: 0 20px;"></common-group-title>
        <common-info-table-cell label="风险异常信息">
          {{ info. abnormalInfo }}
        </common-info-table-cell>

        <common-group-title title="事件详情" style="padding: 0 20px;"></common-group-title>
        <common-info-table-cell label="源IP">
          {{ info.requestRecordSourceIp }}
        </common-info-table-cell>
        <common-info-table-cell label="请求地址">
          {{ info.requestRecordAddress }}
        </common-info-table-cell>
        <common-info-table-cell label="请求路径">
          {{ info.apiUrl }}
        </common-info-table-cell>
        <common-info-table-cell label="请求协议">
          {{ info.requestRecordScheme }}
        </common-info-table-cell>
        <common-info-table-cell label="请求方法">
          {{ info.requestRecordMethod }}
        </common-info-table-cell>
        <common-info-table-cell label="请求头信息">
          {{ info.requestHead }}
        </common-info-table-cell>
        <common-info-table-cell label="请求内容">
          <div style="max-height: 500px;overflow:scroll">
            <code-editor v-if="openInfo" key="requestBody" :value="info.requestBody" :code="info.requestCode" :read-only="true"
                         :border="false"></code-editor>
          </div>
        </common-info-table-cell>

        <common-info-table-cell label="响应头信息">
          {{ info.responseHead }}
        </common-info-table-cell>
        <common-info-table-cell label="响应类型">
          {{ info.responseContentType }}
        </common-info-table-cell>
        <common-info-table-cell
          label="响应内容"
          v-if="isShowContentType(info.responseContentType) || info.responseContentType === null">
          <div style="max-height: 500px;overflow:scroll">
            <code-editor v-if="openInfo" key="responseBody" :value="info.responseBody" :code="info.responseCode" :read-only="true" :border="false"></code-editor>
          </div>
        </common-info-table-cell>

        <!--        <common-info-table-cell label="请求报文">
                  {{ info.requestRecordBody }}
                </common-info-table-cell>
                <common-info-table-cell label="响应报文">
                  {{ info.responseRecordBody }}
                </common-info-table-cell>-->
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
  import {
    traceabilityDetails_query,
    appList,
    senstiveTypeList,
    senstiveNameList,
    getAlarmByUrl
  } from '@/api/traceabilityDetails'
  import CodeEditor from '@/components/CodeEditor'

  export default {
    name: 'index',
    data() {
      return {
        // 查询参数
        queryParams: {
          apiUrl: null,
          interfaceSensitiveRule: null,
          requestRecordScheme: null,
          responseRecordBody: null,
          requestRecordPath: null,
          pageSize: 10,//每页条数
          pageNum: 1, //页
          responseContentType:null,
          applicationName:null,
        },
        List: [],
        total: 0,
        openInfo: false,
        info: {
          requestRecordAddress: '',
          domainName: '',
          apiUrl: '',
          requestRecordMethod: '',
          requestRecordScheme: '',
          requestRecordSourceIp: '',
          responseRecordBody: '',
          requestRecordBody: '',
          requestHead: '',
          requestBody: '',
          requestType: '',// 组件需要
          responseBody: '',
          responseHead: '',
          responseType: '',// 组件需要
          requestCode: null,// 组件需要
          responseCode: null,// 组件需要
          interfaceSensitiveRule: '',
          interfaceDataType: '',
          interfaceDataLevel: '',
          interfaceDataTags: '',
          responseContentType: '',
          abnormalInfo: '',//风险异常信息
        },
        applicationList: [],//应用
        sensitiveTypeList: [],//敏感字段类型
        sensitiveList: [],//敏感字段
        loading: false,
        showContentByList: ['application/json', 'text/plain', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/xml', 'text/html'],
        responseTypeList: [
          {label: 'application/json'},
          {label:'text/plain'},
          {label:'text/csv'},
          {label:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'},
          {label:'text/xml'},
          {label:'text/html'},
          {label:'application/vnd.ms-excel'},
          {label:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'},
          {label:'application/msword'},
        ]
      }
    },
    components: { CodeEditor },
    methods: {
      //查询按钮
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      // 重置按钮
      resetQuery() {
        this.queryParams = this.$options.data().queryParams;
      },
      // 详情弹框取消
      cancelInfo() {
        this.openInfo = false
      },
      //详情
      getInfo(row) {

        this.info.requestRecordAddress = row.requestRecordAddress
        this.info.apiUrl = row.apiUrl
        this.info.requestRecordMethod = row.requestRecordMethod
        this.info.requestRecordScheme = row.requestRecordScheme
        this.info.requestRecordSourceIp = row.requestRecordSourceIp
        this.info.requestRecordBody = row.requestRecordBody
        this.info.responseRecordBody = row.responseRecordBody
        this.info.interfaceSensitiveRule = row.interfaceSensitiveRule
        this.info.interfaceDataType = row.interfaceDataType
        this.info.interfaceDataLevel = row.interfaceDataLevel
        this.info.interfaceDataTags = row.interfaceDataTags
        this.info.responseContentType = row.responseContentType

        this.info.domainName = row.apiUrl ? row.apiUrl.split(':')[1].replace("\/\/", "") : ''

        const handleStr = (str = '') => {
          if (!str) return ''
          str = str.replace(/(\f\n\r\s\S\t\v|\r\n)/g, '')
          str = str.replace(new RegExp('\\\\', 'g'), '')
          str = str.replaceAll('"{', '{')
          str = str.replaceAll('}"', '}')
          return str
        }

        // console.log(row)

        if (row.requestBodyVo) {
          this.info.requestHead = row.requestBodyVo.requestHead
          this.info.requestBody = handleStr(row.requestBodyVo.requestBody)
          // XXX 郑本祥
          this.info.requestCode = this.info.requestBody.charAt(0) === '<' ? 'application/xml' : 'application/json'
        }

        if (row.requestBodyVo) {
          this.info.responseHead = row.responseBodyVo.responseHead
          this.info.responseBody = handleStr(row.responseBodyVo.responseBody)
          this.info.responseCode = this.info.responseBody.charAt(0) === '<' ? 'application/xml' : 'application/json'
        }


        getAlarmByUrl({url: this.info.apiUrl}).then(res => {
          if(res && res.code === 200) {
            this.info.abnormalInfo = res.data
          } else {
            this.info.abnormalInfo = ''
          }
        })
        this.openInfo = true
      },
      getList() {
        this.loading = true
        traceabilityDetails_query(this.queryParams).then((res) => {
          console.log(res)
          if (res && res.code === 200) {
            this.List = res.data.result
            this.total = res && res.data.total ? res.data.total : 0
          } else {
            this.List = []
            this.total = 0
          }
        }).finally(() => {
          this.loading = false
        })
      },
    //应用名称
      application() {
        appList().then(res => {
          console.log('=================>',res.rows)
          this.applicationList = res.rows.reduce((ar,ac)=>{
            ar.push({
              label:ac.applicationName,
              value:ac.applicationName,
              children:ac.serverList.reduce((sr,sc)=>{
                if(sc.domain){
                  sr.push({
                    label:sc.domain,
                    value:sc.domain,
                  })
                }

                if(sc.ip){
                  sr.push({
                    label:sc.ip,
                    value:sc.ip,
                  })
                }
                return sr
              },[])
            })
            return ar
          },[])
          console.log(this.applicationList)
        })

      },
      senstiveType() {
        senstiveTypeList().then((res) => {
          console.log(res)
          this.sensitiveTypeList = res.data
        })
      },
      sensitive() {
        // console.log(this.queryParams.interfaceSensitiveRule)
        let workId = this.queryParams.interfaceSensitiveRule
        if (workId) {
          senstiveNameList({ workId: workId }).then((res) => {
            console.log(res)
            this.sensitiveList = res.data
          })
          this.queryParams.responseRecordBody = null
        } else {// 当敏感字段类型选全部的时候
          this.sensitiveList = []
          this.queryParams.responseRecordBody = null
        }
      },
      change() {
        this.sensitive()
        // console.log(this.queryParams.interfaceSensitiveRule)
      },
      isShowType(value) {
        let index = this.responseTypeList.findIndex(f => f.label === value)
        return index > -1 ? this.responseTypeList[index].label : ''
      },
      isShowContentType(value) {
        return this.showContentByList.includes(value)
      },

    },

    mounted() {
      if (this.$route.query && this.$route.query.url) {
        this.queryParams.apiUrl = this.$route.query.url
      }
      this.getList()
      this.application()
      this.senstiveType()
      this.sensitive()
    }
  }
</script>

<style scoped>

</style>
